import React, { FC } from 'react'
import { TabBar } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import style from './index.module.css'
const TarBarWithRoute: FC = () => {
  const { pathname } = useLocation()
  const navigate = useNavigate()

  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: (active: boolean) => <img style={{ width: '24px', height: '24px' }} src={'/static/tabbar/' + (active ? 'index-active.png' : 'index.png')} alt="" />
    },
    {
      key: 'around',
      title: '周边',
      icon: (active: boolean) => <img style={{ width: '24px', height: '24px' }} src={'/static/tabbar/' + (active ? 'around2.png' : 'around.png')} alt="" />
    },
    {
      key: 'circle',
      title: '逛逛',
      icon: (active: boolean) => <img style={{ width: '24px', height: '24px' }} src={'/static/tabbar/' + (active ? 'circle2.png' : 'circle.png')} alt="" />
    },
    {
      key: 'mine',
      title: '我的',
      icon: (active: boolean) => <img style={{ width: '24px', height: '24px' }} src={'/static/tabbar/' + (active ? 'mine2.png' : 'mine.png')} alt="" />
    }
  ]

  return (
    <div className={style['tar-bar-list']}>
      <TabBar safeArea activeKey={pathname.slice(1)} onChange={(value) => navigate(value)}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  )
}

export default TarBarWithRoute
